<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        div{
            height: 300px;
            background-color: skyblue;

            column-count: 5;
            column-gap: 36px;
            column-rule: 2px dashed violet;
            /* column-fill: balance; */
            column-fill: auto;
        }
    </style>
</head>
<body>
    <div>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla neque voluptatem accusamus est obcaecati blanditiis impedit incidunt suscipit, delectus non, necessitatibus excepturi unde laudantium architecto fugiat. Quasi quidem id tempora?
        Amet eum fuga dolorum nam velit, deserunt laborum ab quae ex asperiores illo sapiente facilis architecto totam eos iusto a quas omnis? Beatae, exercitationem veniam? Libero vero inventore fugit explicabo!
        Ipsam non iste nobis in voluptate ducimus ullam porro magni, quibusdam pariatur illum at aut? Quod error quis cumque veniam, deserunt hic ratione, dicta repudiandae laudantium, aperiam eos magnam illum?
        Alias totam beatae nostrum nam ab eius numquam facilis consequatur laboriosam, officiis corporis nemo molestiae, quisquam, natus error commodi a animi nulla repellendus laborum esse blanditiis adipisci architecto! Nobis, libero.
        Pariatur doloribus tenetur accusamus dignissimos velit quisquam cum unde aspernatur. Voluptates nisi cumque, ad cum error iusto veniam! Iusto fugiat nihil alias est aliquid dignissimos sapiente a explicabo labore non.
    </div>
</body>
</html>